<!--
 * @Author: wwj 3342930399@qq.com
 * @Date: 2024-03-07 17:57:16
 * @LastEditors: wwj 3342930399@qq.com
 * @LastEditTime: 2024-03-14 11:39:12
 * @FilePath: \vue\src\views\Message\sutdent.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="teacher">
    <div class="table">
      <div class="header">
        <a-form layout="inline" :form="form">
          <a-form-item label="老师姓名">
            <a-input v-model="form.teacher" placeholder="请输入老师姓名">
            </a-input>
          </a-form-item>
          <a-form-item label="班级">
            <a-input v-model="form.class" placeholder="请输入班级"> </a-input>
          </a-form-item>
        </a-form>
        <div class="btn">
          <a-button type="primary" @click="handleSubmit"> 确定 </a-button>
          <a-button @click="handleClear"> 清除 </a-button>
        </div>
      </div>
      <div class="operate">
        <a-button type="primary"> 新增 </a-button>
      </div>
      <div class="body">
        <vxe-table
          ref="baseTable"
          :columns="columns"
          :datalist="datalist"
          :pagination="pagination"
          :pageChange="pageChange"
          :checkboxFun="checkBox"
        >
          <template #action="{ scope }">
            <a-button type="link" size="small" @click="handleEdit(scope)">
              编辑
            </a-button>
            <a-button type="link" @click="handleDelete([scope])" size="small">
              删除
            </a-button>
          </template>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
import vxeTable from "../../components/vxeTable.vue";
import { apiGetUserList } from "../../api/teacher";

export default {
  components: { vxeTable },
  data() {
    return {
      formData: {
        name: "",
        sex: "",
        age: "",
        class: "",
        enrollmentDate: "",
        address: "",
        guardianName: "",
        guardianPhone: "",
      },

      columns: [
        { type: "checkbox", width: "5%" },
        { type: "seq", width: "5%", align: "center", title: "序号" },
        { field: "username", title: "姓名", width: "15%", align: "center" },
        {
          field: "password",
          title: "密码",
          width: "15%",
          align: "center",
        },
        {
          field: "phone",
          title: "手机",
          width: "15%",
          align: "center",
        },
        {
          field: "address",
          title: "地址",
          width: "15%",
          align: "center",
        },
        {
          field: "email",
          title: "邮箱",
          width: "15%",
          align: "center",
        },
        {
          title: "操作",
          width: "15%",
          align: "center",
          slots: { default: "action" },
        },
      ],
      datalist: [
        {
          teacher: "三月七",
          course: "语文",
          grade: "1年级",
          class: "1班",
          week: "星期一",
          startTime: "9:00",
          endTime: "10:45",
        },
      ],
      pagination: {
        falg: true,
        pageSize: 10,
        total: 0,
        currentPage: 1,
      },
      checkList: [],
      form: {
        teacher: "",
        class: "",
      },
      show: true,
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    //初始化列表数据
    getUserList() {
      apiGetUserList().then((res) => {
        console.log(res);
        this.datalist = res.data;
      });
    },
    //监听分页器页码变化的，在接收到新的页码后，会执行搜索请求并更新表格数据。
    pageChange(data) {
      this.pagination = data;
      // this.showPostList({
      //   ...data,
      //   pageNum: data.currentPage,
      //   pageSize: data.pageSize,
      // });
    },
    //监听表格选中的行数据，将选中的行数据保存在"checkList"数组中。
    checkBox(data) {
      this.checkList = data;
    },
    //筛选
    handleSubmit() {
      console.log(this.form);
    },
    //清除
    handleClear() {
      this.form = {
        name: "",
        class: "",
      };
    },
    //编辑
    handleEdit() {},
  },
};
</script>

<style lang="scss" scoped>
.teacher {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;

    .btn button {
      margin: 0 5px;
    }
    .operate {
      width: 100%;
    }
  }
  .body {
    width: 100%;
  }
}

.operate button {
  margin: 0 5px 10px 0;
}

::v-deep .el-form-item {
  width: 50%;
}
</style>
